{include file="public/head"}

<body>
<style>
    .left-box{
        margin-left: 8.4%;
    }
    .cartTop{
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
    }
    .cartTop .text{
        border: 1px solid;
        color: #777;
        height: 5rem;
        line-height: 5rem;
        width: 5rem;
        text-align: center;
        border-radius: 50%;
        position: relative;
    }
    .cartTop .text span{
        position: absolute;
        width: 100%;
        white-space: nowrap;
        left: 0;
        height: 2rem;
        line-height: 2rem;
        bottom: -53%;
        font-size: 1.1rem;
    }
    .cartTop .text.active{
        color: #32c5d2;
    }
    .cartTop .line{
        width: 20%;
        height: 3px;
        background: #ccc;
    }
    .cartTop .line.active{
        background: #32c5d2;
    }
    .goodsimg img{
        width: 100%;
    }
    .goodsinfo{
        padding-top: 2%;
    }
    .goodsinfo:hover{
        background: #e0ebef;
    }
    .goodsinfo .name{
        color: #000;
        font-weight: bold;
        font-size: 1.4rem;
    }
    .goodsinfo .num span{
        color: #F05959;
        font-weight: 500;
    }
    .add-cut{
        display: flex;
    }
    .add-cut span{
        width: 3rem;
        display: block;
        border: 1px solid #ccc;
        text-align: center;
        height: 3rem;
        line-height: 3rem;
    }
    .add-cut .goodsnum{
        width: 5rem;
        text-align: right;
        padding-right: 1%;
        border-right: 0;
        border-left: 0;
    }
    .goodsinfo .price{
        text-align: right;
        font-weight: bold;
        font-size: 1.6rem;
        color: #000;
    }
    .allprice{
        padding-right: 11%;
        text-align: right;
    }
    .allprice .text1{
        font-size: 1.6rem;
        color: #000;
        font-weight: bold;
        text-align: right;
        margin-top: 3rem;
    }
    .allprice .text2{
        text-align: right;
        margin-top: 3rem;

    }
    .allprice .text2 span{

        color: #FFF;
        background-color: #32c5d2;
        border-color: #32c5d2;
        text-align: center;
        padding: 5px 10px;
    }
    .allprice .text2 span:hover{
        background-color: #2797a0;
        border-color: #2797a0;
    }
    .cut,.add{
        cursor: pointer;
    }
    .delete{
        position: absolute;
        right: 0;
        color: red;
        cursor: pointer;
    }
</style>
<div id="wrapper">
    {include file="public/menu"}
    <div id="page-wrapper" class="gray-bg dashbard-1">
        {include file="public/nav"}
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-10">
                <h2>购物</h2>
                <ol class="breadcrumb">
                    <li>
                        <a href="{:url('User/Panel')}">主页</a>
                    </li>
                    <li>
                        <a>商城购物</a>
                    </li>
                    <li>
                        <strong>商城购物</strong>
                    </li>
                </ol>
            </div>
            <div class="col-lg-2">

            </div>
        </div>
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>下单</h5>

                        </div>

                        <div class="ibox-content">
                            <div class="row">
                                <div class="col-lg-10 left-box">
                                    <div class="cartTop">
                                        <p class="text active"><span>购物车</span></p>
                                        <p class="line active"></p>
                                        <p class="line"></p>
                                        <p class="text "><span>确认订单</span></p>
                                        <p class="line"></p>
                                        <p class="line"></p>
                                        <p class="text "><span>结账</span></p>

                                    </div>
                                </div>
                                {volist name="goods" id="v"}
                                <div class="col-lg-12 goodsinfo" cart="{$v.id}">
                                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 goodsimg">
                                        <img src="{$v.goods.logo_url}" alt="">
                                    </div>
                                    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
                                        <p class="name">{$v.goods.name}</p><p class="delete" cart="{$v.id}">删除</p>
                                        <p class="content">{$v.goods.introduction}</p>
                                        <p class="num">库存：<span>备货中</span></p>
                                        <p class="add-cut">
                                            <span class="cut">-</span>
                                            <span class="goodsnum" style="text-align: center">{$v.num}</span>
                                            <span class="add">+</span>
                                            <input type="hidden" class="priceVal" value="{$v.goods.price}">
                                        </p>
                                        <p class="price">$ {$v.goods.price|floatval}</p>
                                    </div>
                                </div>
                                {/volist}
                                <div class="col-lg-12 allprice">
                                    <p class="text1">总金额：<span id="total"></span></p>
                                    <a href="{:url('Confirm')}" class="text2"><span>下一步</span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        {include file="public/foot"}
    </div>
</div>
</div>
{include file="public/footer"}
<script>

    var flag = 1;

    $(".cut").click(function () {
        if (!flag){
            return false
        }
        var num = $(this).parent().find('.goodsnum').text()
        var old = parseInt(num)
        if (old > 1){
            var new_num = old - 1;

            $(this).parent().find('.goodsnum').text(new_num)
            getSum()
            flag = 0;
            var id = $(this).parents('.goodsinfo').attr('cart')
            $("#cart_id_"+id).html(new_num)
            $("#cart_total").html((parseInt($("#cart_total").text()) - 1))
            update_cart(id,'reduce');
        }

    })
    $(".add").click(function () {
        if (!flag){
            return false
        }
        var num = $(this).parent().find('.goodsnum').text()
        var old = parseInt(num)
        if (old < 99){
            var new_num = old + 1;

            $(this).parent().find('.goodsnum').text(new_num)
            getSum()
            flag = 0;
            var id = $(this).parents('.goodsinfo').attr('cart')
            $("#cart_id_"+id).html(new_num)
            $("#cart_total").html((parseInt($("#cart_total").text()) + 1))
            update_cart(id,'add');
        }

    })
    function getSum() {
        var sum = 0;
        $(".goodsinfo").each(function () {
            var num = parseInt($(this).find(".goodsnum").text())
            var price = $(this).find('.priceVal').val()
            sum += num*parseFloat(price)
            console.log(num)
            console.log(price)
        })

        $("#total").text(sum)
    }
    function update_cart(id,type){
        $.ajax({
            type:"post",
            dataType: "json",
            data:{id:id,type:type},
            url:"{:url('UpdateCart')}",
            success:function (data) {
                flag = 1;
            }
        })
    }
    getSum()
    //删除购物车
    $(".delete").click(function () {
        var that = $(this)
        $.ajax({
            type:"post",
            dataType:'json',
            url:"{:url('CartDelete')}",
            data:{id:that.attr('cart')},
            beforeSend:function () {
                loadingIndex = layer.load(2, { //icon支持传入0-2
                    shade: [0.5, 'gray'], //0.5透明度的灰色背景
                    content: '加载中...',
                    success: function (layero) {
                        layero.find('.layui-layer-content').css({
                            'padding-top': '39px',
                            'width': '60px'
                        });
                    }
                });
            },
            success:function (data) {
                layer.close(loadingIndex)
                if (data.status == 1){
                    that.parents('.goodsinfo').remove()
                }else {
                    layer.msg(data.message)
                }
            }
        })
    })
</script>
</body>
</html>
